<template>
  <div id="change">
    <div :class="Active ? 'sj' : 'sjs'" title="时间切换" @click="changeStatus('sj')"></div>
    <div :class="Active ? 'tqs' : 'tq'" title="天气切换" @click="changeStatus('tq')"></div>
    <div class="content">
        <weather-change v-if="Active"></weather-change>
        <time-change v-else></time-change>
    </div>
    
  </div>
</template>
<script>
import timeChange from "./time.vue";
import weatherChange from "./weather.vue";
export default {
  components: {
    timeChange,
    weatherChange,
  },
  data() {
    return {
      Active: false,
    };
  },
  methods: {
    changeStatus(type) {
      if (type === "tq") {
        this.Active = true;
      } else {
        this.Active = false;
      }
    },
  },
};
</script>
<style scoped>
#change {
  position: absolute;
  right: 1100px;
  top: 200px;
  width: 500px;
}
#change div + div {
  margin-left: 40px;
}
.sj,
.tq,
.sjs,
.tqs {
  cursor: pointer;
  width: 63px;
  height: 64px;
  display: inline-block;
  background: url(../../../static/images/modules/sj.png);
}
.tq {
  background: url(../../../static/images/modules/tq.png);
}
.sjs {
  cursor: pointer;
  background: url(../../../static/images/modules/sjs.png);
}
.tqs {
  cursor: pointer;
  background: url(../../../static/images/modules/tqs.png);
}
.content{
    margin-top: 40px;
}
</style>